<template>
  <div class="m-page">
    <m-header title="设备监控看板"></m-header>
    <div class="m-body">
      <dv-border-box-8 :reverse="true" :dur="20" class="first-floor">
        <m-row :gutter="20">
          <m-col :span="24 / totals.length" v-for="t in totals" :key="t.color">
            <m-num-board align="horizontal" uom="台" :color="t.color" :title="t.title" :number="t.number" />
          </m-col>
        </m-row>
      </dv-border-box-8>

      <m-row :gutter="20" class="second-floor">
        <m-col :span="12" class="left">
          <m-box class="ewc-detail" title="设备维保点间情况">
            <m-box class="to-spot-check" title="待点检">
              <template v-slot:header>
                <div>待点检：<span class="qty">{{ toSpotCheckNumber }}</span></div>
              </template>
              <m-scroll-board :row-num="4" :loading="toSpotCheckLoading" :cols="toSpotCheckCols"
                :datas="toSpotCheckData" />
            </m-box>
            <m-box class="to-maintain" title="待保养">
              <template v-slot:header>
                <div>待保养：<span class="qty">{{ toMaintainNumber }}</span></div>
              </template>
              <m-scroll-board :row-num="4" :loading="toMaintainLoading" :cols="toMaintainCols"
                :datas="toMaintainData" />
            </m-box>
            <m-box class="to-repair" title="待维修">
              <template v-slot:header>
                <div>待维修：<span class="qty">{{ toRepairNumber }}</span></div>
              </template>
              <m-scroll-board :row-num="4" :loading="toRepairLoading" :cols="toRepairCols" :datas="toRepairData" />
            </m-box>
          </m-box>
        </m-col>
        <m-col :span="12" class="right">
          <m-box class="e-analysis" title="设备运行分析">
            <m-row>
              <m-col :span="12">
                <pie-chart :cols="onlineCols" :datas="onlineData"></pie-chart>
              </m-col>
              <m-col :span="12" class="e-analysis">
                <ul class="e-analysis__li">
                  <li class="e-analysis__item" v-for="a in analysis" :key="a.title">
                    <m-row>
                      <m-col :span="16">
                        <m-box>
                          <div class="e-analysis__item--label">
                            {{ a.title }}：{{ a.value }}{{ a.uom }}
                          </div>
                        </m-box>
                      </m-col>
                      <m-col :span="4">
                        <div class="e-analysis__item--content">
                          <div class="box" :style="`background-color: ${a.color}`"></div>
                        </div>
                      </m-col>
                    </m-row>
                  </li>
                </ul>
              </m-col>
            </m-row>
          </m-box>
          <m-box class="e-monitor" title="设备运行监控">
            <vue3-seamless-scroll hover-stop="true" :list="quipmentMonitoringRunReport" hover="true" step="0.3"
              class="e-monitor-container">
              <m-row>
                <m-col :span="6" v-for="item in quipmentMonitoringRunReport" :key="item.EQUIPMENT_ID">
                  <m-box>
                    <div class="title">{{ item.EQUIPMENT_NAME }}</div>
                    <div>运行时长：{{ item.RUNNING_DURATION }}</div>
                    <div>时间稼动率：{{ Number(item.OPERATING_RATE).toFixed(4) }}%</div>
                    <div class="status online" v-if="item.RUNNING_STATUS == 1">运行</div>
                    <div class="status offline" v-else-if="item.RUNNING_STATUS == 0">离线</div>
                    <div class="status warning" v-else>警报</div>
                  </m-box>
                </m-col>
              </m-row>
            </vue3-seamless-scroll>
          </m-box>
        </m-col>
      </m-row>
    </div>
  </div>
</template>

<script setup>
import http from '@/utils/request'
import { randomColor } from '@/utils/tools'
import { ref, onBeforeMount, onBeforeUnmount } from 'vue'
import pieChart from './components/pieChart/index.vue'
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const totals = ref([
  { color: '#FFF8DC', title: '设备总数', code: 'PPR', number: 0 },
  { color: '#7FFF00', title: '运行中', code: 'MI', number: 0 },
  { color: '#00FFFF', title: '保养中', code: 'MO', number: 0 },
  { color: '#00BFFF', title: '维修中', code: 'PPR', number: 0 },
  { color: '#00BFFF', title: '点检中', code: 'PPR', number: 0 }
])

const toSpotCheckLoading = ref(false)
const toMaintainLoading = ref(false)
const toRepairLoading = ref(false)

const toSpotCheckCols = ref([
  { width: 40, title: '序号', type: 'seq', align: 'center' },
  { width: 120, title: '状态', property: 'STATUS_CN' },
  { width: 160, title: '点检类型', property: 'INSPECT_CATEGORY' },
  { width: 160, title: '设备/编码', property: 'INSPECT_PLAN_CODE' },
  { width: 160, title: '负责人', property: 'USER_INSPECT' },
  { width: 160, title: '计划完成时间', property: 'PLANNED_END_TIME' },
  { width: 160, title: '点检单号', property: 'BILL_NO' }
])
const toMaintainCols = ref([
  { width: 40, title: '序号', type: 'seq', align: 'center' },
  { width: 120, title: '状态', property: 'STATUS_NAME' },
  { width: 160, title: '保养类型', property: 'MAINTENANCE_LEVEL_TYPE' },
  { width: 160, title: '设备/编码', property: 'MAINTENANCE_LEVEL_CODE' },
  { width: 160, title: '负责人', property: 'USER_MAINTENANCE' },
  { width: 160, title: '计划完成时间', property: 'DATETIME_MAINTENANCE_END' },
  { width: 160, title: '保养单号', property: 'BILL_NO' }
])
const toRepairCols = ref([
  { width: 40, title: '序号', type: 'seq', align: 'center' },
  { width: 120, title: '状态', property: 'REPAIR_BILL_STATUS' },
  { width: 160, title: '故障现象', property: 'REPAIR_DESC', formatter: ({ value }) => value.join(',') },
  { width: 160, title: '设备/编码', property: 'EQUIPMENT_CODE' },
  { width: 160, title: '负责人', property: 'USER_REPAIR_NAME' },
  { width: 160, title: '计划完成时间', property: 'DATETIME_REPAIR' },
  { width: 160, title: '维修单号', property: 'BILL_NO' }
])

const toSpotCheckData = ref([])
const toMaintainData = ref([])
const toRepairData = ref([])

// 设备运行分析
const onlineCols = ref([
  { title: '运行', property: 'onLineQty' },
  { title: '离线', property: 'notOnLineQty' }
])
const onlineData = ref({
  onLineQty: 0,
  notOnLineQty: 0
})

// 设备运行分析
const analysis = ref([
  { title: '设备总数', value: 0, uom: '台', color: '', property: "totalQty" },
  { title: '运行', value: 0, uom: '台', color: '#7FFF00', property: "onLineQty" },
  { title: '离线', value: 0, uom: '台', color: 'grey', property: "notOnLineQty" }
])

// 随机生成颜色值
function statusFormat(value) {
  return `<span style="color: ${randomColor()}">${value}</span>`
}

// 模拟接口请求，延迟1秒返回数据
function getData(len, cols) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = Array.from({ length: len }).map((r, i) => {
        const idx = i + 1
        const newRow = cols.reduce((res, _) => {
          if (_.type !== 'seq') {
            res[_.property] = _.title + idx
          }
          return res
        }, {})
        return newRow
      })
      resolve(res)
    }, 1000)
  })
}


// 设备运行分析
const getQuipmentRunReport = async () => {
  try {
    const data = await http.get('v1/kanban/getQuipmentRunReport');
    onlineData.value = data;
    totals.value[1].number = data.onLineQty;
    analysis.value.forEach(item => {
      item.value = data[item.property];
    })
  } catch (e) {
    console.error(e)
  }
}

// 设备运行监控
const quipmentMonitoringRunReportLoading = ref(false)
const quipmentMonitoringRunReport = ref([])
const getQuipmentMonitoringRunReport = async () => {
  try {
    quipmentMonitoringRunReportLoading.value = true
    const data = await http.get('v1/kanban/getQuipmentMonitoringRunReport',{pageindex:1,pagesize:100});
    const { totalRecords } = data;
    totals.value[0].number = totalRecords;
    quipmentMonitoringRunReport.value = data.data;
    quipmentMonitoringRunReportLoading.value = false;
  } catch (error) {
    console.log(error);
    quipmentMonitoringRunReportLoading.value = false;
  }
}

// 设备点检情况待点检
const toSpotCheckNumber = ref(0);
const getMainDataReport = async () => {
  try {
    toSpotCheckLoading.value = true
    const data = await http.get('v1/kanban/getMainDataReport', { pageindex: 1, pagesize: 100 });
    const { totalRecords } = data;
    totals.value[5].number = totalRecords;
    toSpotCheckNumber.value = totalRecords;
    toSpotCheckData.value = data.data;
    toSpotCheckLoading.value = false;
  } catch (error) {
    console.log(error);
    toSpotCheckLoading.value = false;
  }
}

// 设备点检情况待保养
const toMaintainNumber = ref(0);
const getNeedbillDetailsReport = async () => {
  try {
    toMaintainLoading.value = true
    const data = await http.get('v1/kanban/getNeedbillDetailsReport', { pageindex: 1, pagesize: 100 });
    const { totalRecords } = data;
    totals.value[2].number = totalRecords;
    toMaintainNumber.value = totalRecords;
    toMaintainData.value = data.data;
    toMaintainLoading.value = false;
  } catch (error) {
    console.log(error);
    toMaintainLoading.value = false;
  }
}

// 设备点检情况待维修
const toRepairNumber = ref(0);
const getListOnlyBillReport = async () => {
  try {
    toRepairLoading.value = true
    const data = await http.get('v1/kanban/getListOnlyBillReport', { pageindex: 1, pagesize: 999999 });
    const { totalRecords } = data;
    totals.value[3].number = totalRecords;
    toRepairNumber.value = totalRecords;
    toRepairData.value = data.data;
    toRepairLoading.value = false;
  } catch (error) {
    console.log(error);
    toRepairLoading.value = false;
  }
}

function init() {
  // 设备运行分析
  getQuipmentRunReport();
  // 
  getQuipmentMonitoringRunReport();
  // 获取 待点检 数据
  getMainDataReport();

  // 获取 待保养 数据
  getNeedbillDetailsReport();

  // 获取 待维修 数据
  getListOnlyBillReport();

}

let timeId = null;
onBeforeMount(async () => {
  init();
  timeId = setInterval(() => {
    init()
  }, 1000 * 60 * 10)
})

onBeforeUnmount(async () => {
  clearInterval(timeId)
})
</script>
<style lang="less" scoped>
.m-page {
  color: white;

  .m-body {
    ::v-deep(.first-floor) {
      height: 100px;
      width: calc(100% - 30px);
      margin-left: 15px;

      .border-box-content {
        position: relative;

        >.m-row {
          margin-bottom: 0;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);

          .m-col {
            .m-num-board {
              .m-digital {
                .m-digital__uom {
                  font-size: 32px;
                }
              }
            }
          }
        }
      }
    }

    >.m-row {
      margin-bottom: 0;

      &.second-floor {
        height: calc((100% - 100px));

        .m-col {
          height: 100%;

          &.left {
            .ewc-detail {

              .to-spot-check,
              .to-maintain,
              .to-repair {
                height: 33.333%;
              }
            }
          }

          &.right {
            .e-analysis {
              height: 200px;

              .m-box__body {
                .dv-border-box-7 {
                  .border-box-content {
                    .m-row {
                      height: 100%;
                    }
                  }
                }
              }

              .e-analysis {
                position: relative;

                margin-top: 10px;

                .e-analysis__li {
                  margin-top: 10px;
                  // position: absolute;
                  // top: 50%;
                  // transform: translateY(-50%);
                }

              }

              .e-analysis__item--label {
                text-align: center;
                font-weight: bold;
              }

              .e-analysis__item--content {
                display: inline-block;
                width: 80px;
                height: 40px;

                .box {
                  width: 80px;
                  height: 40px;
                  margin-top: 4px;
                  border-radius: 10px;
                }
              }

            }

            .e-monitor {
              height: calc(100% - 320px);
              overflow: hidden;
              color: white;
              font-weight: bold;
              margin-top: 120px;

              .e-monitor-container {
                height: calc(100% - 350px);
                overflow: hidden;
                color: white;
                font-weight: bold;
              }

              .title {
                margin: 10px 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }

              .status {
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                border-radius: 5px;
                margin: 5px 0;


              }

              .online {
                background-color: #7FFF00;
              }

              .offline {
                background-color: grey;
              }

              .warning {
                background-color: orangered;
              }
            }
          }
        }
      }
    }
  }
}
</style>
